<template>
  <!-- vue动画
          单元素动画
          条件：进入、离开 (v-if/v-show)
          实现：
             1：用transition包住动画元素
             2:加入name name的值是后面css的前缀  name='xxx'
             .xxx-enter-active:进入过程中一直存在的class,常用于承载动画的transition/animation
             .xxx-enter:进入过程中，希望从什么状态变到正常状态
             .xxx-leave-active:离开过程中一直存在的class,常用于承载动画的transition/animation
             .xxx-leave-to:离开过程中，希望从正常状态变到什么状态
          多元素动画
             1：用transition-group包住动画元素
             2：每个元素身上都要有key  -->
  <div>
    <button @click="bol = !bol">切换</button>
    <transition name="xxx">
      <div class="box" v-if="bol"></div>
    </transition>
    <hr />
    <button @click="sbol = !sbol">切换</button>
    <br />
    <transition-group name="abc">
      <div class="sbox" v-for="item in 5" :key="item" v-show="sbol"></div>
    </transition-group>
  </div>
</template>
<script>
export default {
  data () {
    return {
      bol: true,
      sbol: true
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: #f00;
}
.xxx-enter-active {
  transition: all 0.5s;
}
.xxx-enter {
  width: 0;
  height: 0;
  opacity: 0;
}
.xxx-leave-active {
  transition: all 0.5s;
}
.xxx-leave-to {
  width: 0;
  height: 0;
  opacity: 0;
}
.sbox {
  width: 30px;
  height: 30px;
  background-color: #f00;
  margin: 0 20px;
  display: inline-block;
}
.abc-enter-active {
  // transition:属性  时间   曲线  延时；
  transition: all 0.5s;
}
.abc-enter-active:nth-child(1) {
  transition-delay: 0.2s;
}
.abc-enter-active:nth-child(2) {
  transition-delay: 0.4s;
}
.abc-enter-active:nth-child(3) {
  transition-delay: 0.6s;
}
.abc-enter-active:nth-child(4) {
  transition-delay: 0.8s;
}
.abc-enter-active:nth-child(5) {
  transition-delay: 1s;
}
.abc-enter {
  transform: translateY(150px);
  opacity: 0;
}
.abc-leave-active {
  transition: all 0.5s;
}
.abc-leave-to {
  transform: translateY(-150px);
  opacity: 0;
}
</style>
